
<template>

    <div id="tab-bar">
        <tab-bar-item link='/home'>
          <template #item-icon="data">
          <img v-if="!data.isActive" src="~assets/img/tabbar/home.png" slot="item-icon" alt=""  />
          <img v-else src="~assets/img/tabbar/home-o.png" slot="item-icon" alt=""  />
          
          <div slot="item-text" :class="{active:data.isActive}">首页</div>
          </template>
        </tab-bar-item >
        <tab-bar-item link='/category' >
          <template #item-icon="data">
          <img v-if="!data.isActive" src="~assets/img/tabbar/category.png" slot="item-icon" alt=""  />
          <img v-else src="~assets/img/tabbar/category-o.png" slot="item-icon" alt=""  />
          
          <div slot="item-text" :class="{active:data.isActive}">分类</div>
          </template>
        </tab-bar-item>
        <tab-bar-item link='/cart' >
          <template #item-icon="data">
          <img v-if="!data.isActive" src="~assets/img/tabbar/cart.png" slot="item-icon" alt=""  />
          <img v-else src="~assets/img/tabbar/cart-o.png" slot="item-icon" alt=""  />
          
          <div slot="item-text" :class="{active:data.isActive}">购物车</div>
          </template>
        </tab-bar-item>
        <tab-bar-item link='/my' >
          <template #item-icon="data">
          <img v-if="!data.isActive" src="~assets/img/tabbar/my.png" slot="item-icon" alt=""  />
          <img v-else src="~assets/img/tabbar/my-o.png" slot="item-icon" alt=""  />          
          <div slot="item-text" :class="{active:data.isActive}">我的</div>
          </template>
        </tab-bar-item>
      </div>

</template>

<script>
/* eslint-disable */
import TabBarItem from './TabBarItem.vue'
export default {
  name: "TabBar",

  components:{
      TabBarItem
  },
  data(){
      return{
       
      }
  }
};
</script>

<style>
#tab-bar {
  display: flex;
  background-color: rgb(224, 224, 224);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
.active{
  color: red;
}

</style>
